<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    

    <title>停车场地图</title>
  </head>
  <style type="text/css">
      .car{
        /* display: inline-block;
        background-color:green;
        height: 60px;
        width: 40px;
        margin-left: 5px; */
        margin-left: 15px;
        margin-top: 15px;
      }
      .ball{
            width:20px;
            height: 20px;
            background: red;
            border-radius: 50%;
            position: absolute;
        }
    .ball:hover{
      background: white;
    }
  </style>
  <script type="text/javascript">
    window.onload = function () {
      alert("等待系统分配车位......")
      alert('车位分配成功！\n您的车位在B6')
    }
  </script>
  <body>
    

     <!-- 新 Bootstrap 核心 CSS 文件 -->
     <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

          <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">



    <div class="container">
      <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                  <a class="navbar-brand" href="#">停车场寻车系统</a>
              </div>
              <div>
                  <ul class="nav navbar-nav">
                      <li ><a href="./userLogin.html">首页</a></li>
                      <li ><a href="./inputMessage.html">车辆登记</a></li>
                      <li class="active"><a href="./user-select.html">查看车位</a></li>
                      <li><a href="./findCar.html">搜索车辆</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                              相关链接 <b class="caret"></b>
                          </a>
                          <ul class="dropdown-menu">
                              <li><a href="https://v3.bootcss.com/">bootstrap</a></li>
                              <li><a href="https://baidu.com/">百度</a></li>

                          </ul>
                      </li>
                  </ul>
              </div>
            </div>
          </nav>
            <h3 style="text-align: center;">停车场地图</h3>
        </div>
       
       <!-- <h1 style="text-align: center;">停车场寻车系统</h1> -->
        <!-- <div class="row" >
            <div class="col-md-4 ">
              
            </div>
            <div class="col-md-4 ">
                <h3 style="text-align: center;">选择车位</h3>
            </div>
            <div class="col-md-4 ">
                
            </div>

        </div> -->


        <div class="tabs book clearfix " style="
          border:#ddd 1px solid;
          border-radius:4px;
          margin-top: 20px;
        ">
          <div class="wrap" style="widows: 100%;text-align: center;">
            <img src="./images/map.jpg" style="border:none;cursor:pointer;width:1130px;height: 700px;">
            <div title="苏A12345" class="ball" style="top:344.6000061035156px;left:760.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:340.5999984741211px;left:654.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:323px;left:483px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:348.6000061035156px;left:944.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:785.5999908447266px;left:396.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:784.5999908447266px;left:488.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:784.5999908447266px;left:556.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:783.5999908447266px;left:596.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:672.5999908447266px;left:556.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:584.5999908447266px;left:543.3999938964844px;background-color: green"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:547.5999908447266px;left:544.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:604.5999908447266px;left:825.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:549.6000213623047px;left:740.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:492.6000213623047px;left:788.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>

            <div title="苏A12345" class="ball" style="top:550.6000213623047px;left:911.3999938964844px"><i class="fa fa-car" aria-hidden="true"></i></div>
          </div>



          
        </div>


    </div>




  </body>
</html>